<template>
    <div id="StudentInformation"
        :style="{ 'transition': isCollapse ? '.6s all' : '.35s all', 'width': isCollapse ? myWidth1 : myWidth2 }">
        <div class="main" :style="{'height':myHeight}">
            <div class="s_top">
                <div class="serach">
                    <el-row>
                        <el-col :span="3" style="text-align: right;padding-right: 10px;font-size: 13px;">
                            姓名
                        </el-col>
                        <el-col :span="9">
                            <el-input v-model="serach.serachName"  placeholder="请输入内容"></el-input>
                        </el-col>   
                        <el-col :span="3" style="text-align: right;padding-right: 10px;font-size: 13px;">
                            学号
                        </el-col>
                        <el-col :span="9">
                            <el-input v-model="serach.serachNumber" placeholder="请输入内容"></el-input>
                        </el-col>
                    </el-row>
                </div>
                <el-button size="mini" style="margin-left:10px" @click="pageNum=1;initData()">重置</el-button>
                <el-button type="primary" size="mini" @click="forSerach">搜索</el-button>
                
                <el-button type="primary"  class="btn_excel"  style="margin-left: 2px;" @click="forExcel">导出为Excel</el-button>
                <el-button type="success" class="btn_excel" v-if="false"  style="margin-right: 0px;" @click="addStudent">添加数据</el-button>
            </div>
            <!-- 表格 -->
            <el-table 
                :data="tableData"
                stripe 
                style="width: 100%"
                :height="myHeight-50"
                id="excel"
                >
                <el-table-column type="index" width="50">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="number" label="学号" >
                </el-table-column>
                <el-table-column  label="性别">
                    <template slot-scope="scope">
                        {{ scope.row.gender==1?'男':'女' }}
                    </template>
                </el-table-column>
                <el-table-column prop="majorGetDTO.academyEntity.name" label="学院">
                </el-table-column>
                <el-table-column prop="majorGetDTO.name" label="专业">
                </el-table-column>
                <el-table-column  label="操作" v-if="!notforexcel">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="updateStudent(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteStudent(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页条 -->
            <div class="block" style="background-color:#ffffff">
                <el-pagination 
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageNum" 
                    :page-size="pageSize" layout="prev, pager, next, jumper" :total="sumNum">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑打开的表格 -->
        <el-drawer :title="title" :visible.sync="drawer" direction="rtl" :before-close="handleClose">
            <el-form ref="form" :model="updateData" label-width="80px" style="padding-right: 20px;">
                <el-form-item label="姓名">
                    <el-input v-model="updateData.name"></el-input>
                </el-form-item>
                <el-form-item label="学号">
                    <el-input v-model="updateData.number"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="updateData.gender"></el-input>
                </el-form-item>
                <el-form-item label="学院">
                    <el-select  @change="acachange()" v-model="updateData.academyid" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.aid" :label="item.name" :value="item.aid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="专业">
                    <el-select v-model="updateData.majorid"  placeholder="请选择">
                        <el-option v-for="item in options2" :key="item.mid" :label="item.name" :value="item.mid">
                        </el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary"  @click="onUpdate">修改</el-button>
                    <el-button @click="drawer=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data(){
        return{
            sumNum:0,
            pageSize:10,
            pageNum:1,//现在的页数
            title:"",
            drawer: false,//编辑表格是否打开
            notforexcel:false,
            updateData: {
                iid:"",
                name:"",
                number: "",
                gender:"",
                majorid:"",
                majorname:"",
                academyname:"",
                academyid: "",
                did:"",
            },//编辑表格中的信息
            tableData: [],//表格信息
            allData: [],
            myHeight:"",
            myWidth1: "",//未展开的宽度
            myWidth2: "",//展开了的宽度
            options: [],//学院信息
            options2: [],//专业信息
            serach:{
                serachName:"",//查询条件中的姓名
                serachNumber: "",//查询条件中的学号
            }
        }
    },
    props: {
        isCollapse: true,
        userdetail: {},
    },
    methods:{
        handleSizeChange(val) {//页的大小改变时触发
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {//当前页切换时触发
            // console.log(`当前页: ${val}`);
            var _this=this;
            axios({
                method: "get",
                url: "api/users/getAllInfo?pageSize=" + _this.pageSize + "&pageNum=" +val,
            }).then(function (resp) {
                _this.tableData = resp.data.data.data;
            })
        },
        acachange(){
            var _this=this;
            this.updateData.majorid="";
            axios({
                method: "get",
                url: "api/majors/getMajorByAid/" + this.updateData.academyid
            }).then(function (resp) {
                _this.options2 = resp.data.data;
            })
            
        },
        forSerach(){
            if(this.serach.serachName==""&&this.serach.serachNumber==""){
                this.$message('请输入内容！');
            }else{
                var _this=this;
                // console.log(this.serach);
                if(this.serach.serachName==""){//按学号
                    axios({
                        method: "post",
                        url: "api/users/getByNumber",
                        data: {
                            "number": _this.serach.serachNumber
                        }
                    }).then(function (resp) {
                        _this.tableData = resp.data.data.data;
                        _this.pageNum = 1;
                        _this.serach.serachNumber = "";
                        _this.sumNum = resp.data.data.totalNum;
                    })
                }else if(this.serach.serachNumber==""){//按姓名查
                    axios({
                        method: "post",
                        url: "api/users/getByLikeName",
                        data:{
                            "name":_this.serach.serachName
                        }
                    }).then(function (resp) {
                        _this.tableData = resp.data.data.data;
                        _this.pageNum = 1;
                        _this.serach.serachName = "";
                        _this.sumNum = resp.data.data.totalNum;
                    })
                }else{//一起查
                    axios({
                        method: "post",
                        url: "api/users/getByLikeName",
                        data: {
                            "name": _this.serach.serachName
                        }
                    }).then(function (resp) {
                        // console.log(resp.data.data.data)
                        _this.tableData=[];
                        resp.data.data.data.forEach((item,index)=>{
                            var index = item.number.indexOf(_this.serach.serachNumber);
                            if (index!=-1){
                                _this.tableData.push(item);
                                _this.pageNum = 1;
                                _this.sumNum =1;
                            }
                        })
                        _this.serach.serachName = "";
                        _this.serach.serachNumber = ""
                    })
                }
            }
            
        },
        addStudent(){},
        onAdd(){},
        deleteStudent(index,row){
            // console.log(row)
            var _this=this;
            //数据库操作
            axios({
                method: "delete",
                url: "api/users/deleteInfoById/"+row.iid,
            }).then(function (resp) {
                if(resp.data.code==200){
                    _this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    _this.pageNum = 1;
                    _this.init();
                }else{
                    _this.$message({
                        message: resp.data.msg,
                        type: 'error'
                    });
                }
            })
        },
        updateStudent(index, row){//打开编辑数据的表格
            var _this=this;
            this.drawer=!this.drawer;
            // console.log(row);

            this.updateData.iid=row.iid;
            this.updateData.name=row.name;
            this.updateData.gender=row.gender==1?'男':'女';
            this.updateData.number=row.number;
            this.updateData.majorid=row.majorGetDTO.mid;
            // this.updateData.majorname = row.majorGetDTO.name;
            // this.updateData.academyname=row.majorGetDTO.academyEntity.name;
            this.updateData.academyid = row.majorGetDTO.academyEntity.aid;
            this.updateData.did = row.dormitoryGetTDO.did;
            // this.updateData.pid=
            
            axios({
                method: "get",
                url: "api/majors/getMajorByAid/" + _this.updateData.academyid
            }).then(function (resp) {
                _this.options2 = resp.data.data;
            })
        },
        onUpdate(){
            if (this.updateData.academyid==""|| this.updateData.name == "" || this.updateData.gender == "" || this.updateData.number == "" || this.updateData.majorid=="" ){
                this.$message("请输入规范内容")
            }else{
                //数据库操作
                var _this=this;
                axios({
                    method: "put",
                    url: "api/users/updateInfo",
                    data:{
                        "iid":_this.updateData.iid,
                        "name":_this.updateData.name,
                        "number": _this.updateData.number,
                        "gender": _this.updateData.gender=="男"?'1':'0',
                        "mid": _this.updateData.majorid,
                        "did": _this.updateData.did,
                        "pid":18
                    }
                }).then(function (resp) {
                    if(resp.data.code==200){
                        _this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        _this.pageNum=1;
                        _this.initData();
                    }else{
                        _this.$message({
                            message: resp.data.msg,
                            type: 'error'
                        });    
                    }
                })
                console.log(this.updateData);
                this.drawer = !this.drawer;
            }
        },
        forExcel(){
            var temp = this.tableData;
            this.tableData = this.allData
            this.notforexcel=!this.notforexcel;
            this.$nextTick(()=>{
                this.Excels.exportExcel("导出数据.xlsx", "#excel");  //此括号里面（第一个是导出文件的名称，第二个是需要导出的标签的id）
                this.notforexcel = !this.notforexcel;
                this.tableData = temp;
            })
        },
        initData(){//初始化数据
            var _this = this;

            //查询学院信息然后进行赋值
            axios({
                method: "get",
                url: "api/majors/getAllAcademy",
            }).then(function (resp) {
                _this.options = resp.data.data.data;
            })
            // //初始化专业信息
            // axios({
            //     method: "get",
            //     url: "api/majors/getAllMajor",
            // }).then(function (resp) {
            //     _this.options2 = resp.data.data;
            // })
            
            //初始化表格信息
            axios({
                method: "get",
                url: "api/users/getAllInfo?pageSize=" + _this.pageSize + "&pageNum=" + _this.pageNum,
            }).then(function (resp) {
                _this.tableData = resp.data.data.data;
            })
            axios({
                method: "get",
                url: "api/users/getAllInfo?pageSize=1000&pageNum=1",
            }).then(function (resp) {
                // console.log(resp.data);
                _this.sumNum = resp.data.data.totalNum;
                _this.allData = resp.data.data.data;
            })
        },
        handleClose(done) {
            this.$confirm('还未保存是否关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        }
    },
    created(){
        this.myHeight = window.innerHeight - 40 - 40 - 20 -30+ "";
        this.myWidth1 = window.innerWidth - 64 - 30 + "px"
        this.myWidth2 = window.innerWidth - 200 - 30 + "px"
    },
    mounted(){
        this.initData();
    }
}
</script>

<style scoped>
#StudentInformation{
    float: left;
    /* height: 500px; */
}
#StudentInformation .main{
    width: 100%;
    margin-top: 15px;
}
#StudentInformation .main .s_top{
    text-align: initial;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #ffffff;
    border-bottom: 0.7px solid rgba(0, 0, 0, .2);
}
.serach{
    width: 650px;
    height: 100%;
    float: left;
}
.btn_excel{
    float: right;
    margin-top: 5px;
    margin-right: 10px;
}
 

</style>